<template>
  <div class="template-create-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">创建模板</h1>
          <p class="page-subtitle">将您的设计转化为可复用的模板，帮助团队提高开发效率</p>
        </div>
        <div class="header-right">
          <el-button @click="goBack" :icon="ArrowLeft">
            返回列表
          </el-button>
        </div>
      </div>
    </div>

    <!-- 创建步骤 -->
    <div class="steps-section">
      <el-card class="steps-card">
        <el-steps :active="currentStep" align-center class="template-steps">
          <el-step title="基本信息" description="填写模板基本信息" :icon="InfoFilled" />
          <el-step title="设计配置" description="配置模板样式和布局" :icon="Setting" />
          <el-step title="预览确认" description="预览模板效果" :icon="View" />
          <el-step title="发布模板" description="发布到模板库" :icon="Upload" />
        </el-steps>
      </el-card>
    </div>

    <!-- 表单内容 -->
    <div class="form-section">
      <el-form
        ref="templateFormRef"
        :model="templateForm"
        :rules="formRules"
        label-width="120px"
        class="template-form"
      >
        <!-- 步骤1：基本信息 -->
        <div v-show="currentStep === 0" class="step-content">
          <el-card class="form-card">
            <template #header>
              <div class="card-header">
                <h3 class="card-title">基本信息</h3>
                <p class="card-subtitle">请填写模板的基本信息</p>
              </div>
            </template>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="模板名称" prop="name" required>
                  <el-input
                    v-model="templateForm.name"
                    placeholder="请输入模板名称"
                    maxlength="50"
                    show-word-limit
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="模板分类" prop="category" required>
                  <el-select
                    v-model="templateForm.category"
                    placeholder="请选择模板分类"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="category in categories"
                      :key="category.value"
                      :label="category.label"
                      :value="category.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="模板描述" prop="description" required>
              <el-input
                v-model="templateForm.description"
                type="textarea"
                :rows="4"
                placeholder="请详细描述模板的功能和特点，帮助用户更好地了解模板用途"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="标签" prop="tags">
                  <el-select
                    v-model="templateForm.tags"
                    multiple
                    filterable
                    allow-create
                    placeholder="选择或创建标签"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="tag in availableTags"
                      :key="tag"
                      :label="tag"
                      :value="tag"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目标用户" prop="targetUsers">
                  <el-checkbox-group v-model="templateForm.targetUsers">
                    <el-checkbox label="前端开发者" />
                    <el-checkbox label="UI设计师" />
                    <el-checkbox label="产品经理" />
                    <el-checkbox label="初学者" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="预览图片" prop="previewImage">
              <div class="upload-area">
                <el-upload
                  class="preview-uploader"
                  :action="uploadAction"
                  :show-file-list="false"
                  :on-success="handlePreviewSuccess"
                  :before-upload="beforePreviewUpload"
                  :on-error="handleUploadError"
                  accept="image/*"
                  drag
                >
                  <div v-if="templateForm.previewImage" class="preview-container">
                    <img :src="templateForm.previewImage" class="preview-image" />
                    <div class="preview-overlay">
                      <el-icon class="upload-icon"><Plus /></el-icon>
                      <div class="upload-text">点击或拖拽替换图片</div>
                    </div>
                  </div>
                  <div v-else class="upload-placeholder">
                    <el-icon class="upload-icon"><Plus /></el-icon>
                    <div class="upload-text">点击或拖拽上传预览图片</div>
                    <div class="upload-hint">建议尺寸：800x600，支持JPG、PNG格式</div>
                  </div>
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item label="功能特性">
              <div class="features-input">
                <div v-for="(feature, index) in templateForm.features" :key="index" class="feature-item">
                  <el-input
                    v-model="templateForm.features[index]"
                    placeholder="请输入功能特性"
                    style="flex: 1"
                  />
                  <el-button
                    :icon="Delete"
                    @click="removeFeature(index)"
                    type="danger"
                    text
                    :disabled="templateForm.features.length <= 1"
                  />
                </div>
                <el-button @click="addFeature" :icon="Plus" type="primary" text>
                  添加特性
                </el-button>
              </div>
            </el-form-item>
          </el-card>
        </div>

        <!-- 步骤2：设计配置 -->
        <div v-show="currentStep === 1" class="step-content">
          <el-card class="form-card">
            <template #header>
              <div class="card-header">
                <h3 class="card-title">设计配置</h3>
                <p class="card-subtitle">配置模板的样式和布局选项</p>
              </div>
            </template>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="主题色彩" prop="primaryColor">
                  <div class="color-picker-group">
                    <el-color-picker
                      v-model="templateForm.primaryColor"
                      show-alpha
                      :predefine="predefineColors"
                    />
                    <el-input
                      v-model="templateForm.primaryColor"
                      placeholder="#409EFF"
                      style="margin-left: 12px; flex: 1"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="布局模式" prop="layoutMode">
                  <el-radio-group v-model="templateForm.layoutMode">
                    <el-radio label="fixed">固定布局</el-radio>
                    <el-radio label="fluid">流式布局</el-radio>
                    <el-radio label="responsive">响应式布局</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="组件库" prop="componentLibrary">
                  <el-select
                    v-model="templateForm.componentLibrary"
                    placeholder="请选择组件库"
                    style="width: 100%"
                  >
                    <el-option label="Element Plus" value="element-plus" />
                    <el-option label="Ant Design Vue" value="ant-design-vue" />
                    <el-option label="Naive UI" value="naive-ui" />
                    <el-option label="Vuetify" value="vuetify" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="框架版本" prop="framework">
                  <el-select
                    v-model="templateForm.framework"
                    placeholder="请选择框架版本"
                    style="width: 100%"
                  >
                    <el-option label="Vue 3 + Vite" value="vue3-vite" />
                    <el-option label="Vue 3 + Webpack" value="vue3-webpack" />
                    <el-option label="Vue 2 + Webpack" value="vue2-webpack" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="包含功能">
              <el-checkbox-group v-model="templateForm.includedFeatures">
                <el-row :gutter="16">
                  <el-col :span="6">
                    <el-checkbox label="路由导航" />
                    <el-checkbox label="状态管理" />
                    <el-checkbox label="HTTP请求" />
                  </el-col>
                  <el-col :span="6">
                    <el-checkbox label="表单验证" />
                    <el-checkbox label="数据表格" />
                    <el-checkbox label="图表组件" />
                  </el-col>
                  <el-col :span="6">
                    <el-checkbox label="文件上传" />
                    <el-checkbox label="权限控制" />
                    <el-checkbox label="主题切换" />
                  </el-col>
                  <el-col :span="6">
                    <el-checkbox label="国际化" />
                    <el-checkbox label="错误处理" />
                    <el-checkbox label="性能优化" />
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="代码结构">
              <el-input
                v-model="templateForm.codeStructure"
                type="textarea"
                :rows="8"
                placeholder="请描述模板的代码结构和文件组织方式..."
                class="code-textarea"
              />
            </el-form-item>
          </el-card>
        </div>

        <!-- 步骤3：预览确认 -->
        <div v-show="currentStep === 2" class="step-content">
          <el-card class="form-card">
            <template #header>
              <div class="card-header">
                <h3 class="card-title">预览确认</h3>
                <p class="card-subtitle">预览模板信息，确认无误后即可发布</p>
              </div>
            </template>

            <div class="preview-section">
              <div class="preview-card">
                <div class="preview-header">
                  <div class="preview-image-container">
                    <img
                      :src="templateForm.previewImage || defaultPreviewImage"
                      class="template-preview-image"
                      @error="handlePreviewImageError"
                    />
                    <div v-if="templateForm.category === 'premium'" class="premium-badge">
                      <el-icon><Star /></el-icon>
                      精选
                    </div>
                  </div>
                  <div class="preview-info">
                    <h2 class="template-title">{{ templateForm.name || '未命名模板' }}</h2>
                    <p class="template-desc">{{ templateForm.description || '暂无描述' }}</p>
                    <div class="template-meta">
                      <el-tag type="info">{{ getCategoryLabel(templateForm.category) }}</el-tag>
                      <div class="meta-info">
                        <span><el-icon><User /></el-icon> {{ currentUser }}</span>
                        <span><el-icon><Calendar /></el-icon> {{ formatDate(new Date()) }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="preview-details">
                  <div class="detail-section">
                    <h4>标签</h4>
                    <div class="tags-container">
                      <el-tag
                        v-for="tag in templateForm.tags"
                        :key="tag"
                        class="template-tag"
                      >
                        {{ tag }}
                      </el-tag>
                      <span v-if="templateForm.tags.length === 0" class="no-data">暂无标签</span>
                    </div>
                  </div>

                  <div class="detail-section">
                    <h4>功能特性</h4>
                    <ul class="features-list">
                      <li v-for="feature in templateForm.features.filter(f => f.trim())" :key="feature">
                        <el-icon><Check /></el-icon>
                        {{ feature }}
                      </li>
                      <li v-if="templateForm.features.filter(f => f.trim()).length === 0" class="no-data">
                        暂无功能特性
                      </li>
                    </ul>
                  </div>

                  <div class="detail-section">
                    <h4>技术配置</h4>
                    <div class="tech-config">
                      <div class="config-item">
                        <span class="config-label">主题色彩：</span>
                        <span class="config-value">
                          <span
                            class="color-preview"
                            :style="{ backgroundColor: templateForm.primaryColor }"
                          ></span>
                          {{ templateForm.primaryColor || '#409EFF' }}
                        </span>
                      </div>
                      <div class="config-item">
                        <span class="config-label">布局模式：</span>
                        <span class="config-value">{{ getLayoutModeLabel(templateForm.layoutMode) }}</span>
                      </div>
                      <div class="config-item">
                        <span class="config-label">组件库：</span>
                        <span class="config-value">{{ getComponentLibraryLabel(templateForm.componentLibrary) }}</span>
                      </div>
                      <div class="config-item">
                        <span class="config-label">框架版本：</span>
                        <span class="config-value">{{ getFrameworkLabel(templateForm.framework) }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="detail-section">
                    <h4>包含功能</h4>
                    <div class="included-features">
                      <el-tag
                        v-for="feature in templateForm.includedFeatures"
                        :key="feature"
                        type="success"
                        size="small"
                        class="feature-tag"
                      >
                        {{ feature }}
                      </el-tag>
                      <span v-if="templateForm.includedFeatures.length === 0" class="no-data">
                        暂无选择功能
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 步骤4：发布确认 -->
        <div v-show="currentStep === 3" class="step-content">
          <el-card class="form-card">
            <template #header>
              <div class="card-header">
                <h3 class="card-title">发布模板</h3>
                <p class="card-subtitle">选择发布选项并确认发布</p>
              </div>
            </template>

            <div class="publish-options">
              <el-form-item label="发布类型" prop="publishType">
                <el-radio-group v-model="templateForm.publishType" class="publish-type-group">
                  <el-radio label="public" class="publish-option">
                    <div class="option-content">
                      <div class="option-header">
                        <el-icon><Share /></el-icon>
                        <span class="option-title">公开发布</span>
                      </div>
                      <p class="option-desc">所有用户都可以查看和使用此模板</p>
                    </div>
                  </el-radio>
                  <el-radio label="private" class="publish-option">
                    <div class="option-content">
                      <div class="option-header">
                        <el-icon><Lock /></el-icon>
                        <span class="option-title">私有模板</span>
                      </div>
                      <p class="option-desc">仅您和授权用户可以使用此模板</p>
                    </div>
                  </el-radio>
                  <el-radio label="team" class="publish-option">
                    <div class="option-content">
                      <div class="option-header">
                        <el-icon><UserFilled /></el-icon>
                        <span class="option-title">团队共享</span>
                      </div>
                      <p class="option-desc">仅团队成员可以查看和使用此模板</p>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="许可协议" prop="license">
                <el-select
                  v-model="templateForm.license"
                  placeholder="请选择许可协议"
                  style="width: 100%"
                >
                  <el-option label="MIT License" value="mit" />
                  <el-option label="Apache License 2.0" value="apache" />
                  <el-option label="GPL v3" value="gpl" />
                  <el-option label="BSD 3-Clause" value="bsd" />
                  <el-option label="Creative Commons" value="cc" />
                </el-select>
              </el-form-item>

              <el-form-item label="版本信息">
                <el-row :gutter="16">
                  <el-col :span="8">
                    <el-input v-model="templateForm.version" placeholder="1.0.0" addonBefore="版本号" />
                  </el-col>
                  <el-col :span="16">
                    <el-input v-model="templateForm.changelog" placeholder="初始版本发布" addonBefore="更新日志" />
                  </el-col>
                </el-row>
              </el-form-item>

              <el-form-item>
                <el-checkbox v-model="templateForm.agreeTerms" required>
                  我同意 <el-link type="primary">模板发布协议</el-link> 和 <el-link type="primary">使用条款</el-link>
                </el-checkbox>
              </el-form-item>
            </div>
          </el-card>
        </div>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="actions-section">
      <el-card class="actions-card">
        <div class="actions-content">
          <div class="actions-left">
            <el-button
              v-if="currentStep > 0"
              @click="prevStep"
              :icon="ArrowLeft"
            >
              上一步
            </el-button>
          </div>
          <div class="actions-right">
            <el-button @click="saveDraft" :icon="DocumentCopy">
              保存草稿
            </el-button>
            <el-button
              v-if="currentStep < 3"
              type="primary"
              @click="nextStep"
              :icon="ArrowRight"
            >
              下一步
            </el-button>
            <el-button
              v-if="currentStep === 3"
              type="primary"
              @click="publishTemplate"
              :loading="publishing"
              :icon="Upload"
            >
              发布模板
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  ArrowLeft,
  ArrowRight,
  InfoFilled,
  Setting,
  View,
  Upload,
  Plus,
  Delete,
  Check,
  User,
  Calendar,
  Star,
  Share,
  Lock,
  UserFilled,
  DocumentCopy
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const currentStep = ref(0)
const publishing = ref(false)
const templateFormRef = ref(null)
const currentUser = ref('当前用户')
const uploadAction = ref('#') // 这里应该是实际的上传地址

// 默认预览图
const defaultPreviewImage = ''

// 表单数据
const templateForm = reactive({
  name: '',
  category: '',
  description: '',
  tags: [],
  targetUsers: [],
  previewImage: '',
  features: [''],
  primaryColor: '#409EFF',
  layoutMode: 'responsive',
  componentLibrary: 'element-plus',
  framework: 'vue3-vite',
  includedFeatures: [],
  codeStructure: '',
  publishType: 'public',
  license: 'mit',
  version: '1.0.0',
  changelog: '',
  agreeTerms: false
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择模板分类', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入模板描述', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ],
  primaryColor: [
    { required: true, message: '请选择主题色彩', trigger: 'change' }
  ],
  layoutMode: [
    { required: true, message: '请选择布局模式', trigger: 'change' }
  ],
  componentLibrary: [
    { required: true, message: '请选择组件库', trigger: 'change' }
  ],
  framework: [
    { required: true, message: '请选择框架版本', trigger: 'change' }
  ],
  publishType: [
    { required: true, message: '请选择发布类型', trigger: 'change' }
  ],
  license: [
    { required: true, message: '请选择许可协议', trigger: 'change' }
  ]
}

// 分类选项
const categories = [
  { label: '管理后台', value: 'admin' },
  { label: '数据展示', value: 'dashboard' },
  { label: '表单页面', value: 'form' },
  { label: '列表页面', value: 'list' },
  { label: '详情页面', value: 'detail' },
  { label: '用户中心', value: 'user' },
  { label: '电商页面', value: 'ecommerce' },
  { label: '博客页面', value: 'blog' }
]

// 可用标签
const availableTags = [
  'Vue3', 'Element Plus', '响应式', '暗色主题', '图表', 
  '表格', '表单', '卡片', '导航', '侧边栏', '头部',
  '移动端', 'TypeScript', 'Pinia', 'Vue Router'
]

// 预定义颜色
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  '#409EFF',
  '#67C23A',
  '#E6A23C',
  '#F56C6C',
  '#909399'
]

// 方法
const goBack = () => {
  ElMessageBox.confirm(
    '确定要离开吗？未保存的更改将会丢失。',
    '确认离开',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 这里可以添加路由跳转逻辑
    ElMessage.info('返回模板列表')
  }).catch(() => {
    ElMessage.info('已取消')
  })
}

const nextStep = async () => {
  if (currentStep.value < 3) {
    // 验证当前步骤
    let fieldsToValidate = []
    
    switch (currentStep.value) {
      case 0:
        fieldsToValidate = ['name', 'category', 'description']
        break
      case 1:
        fieldsToValidate = ['primaryColor', 'layoutMode', 'componentLibrary', 'framework']
        break
      case 2:
        // 预览步骤不需要额外验证
        break
    }
    
    if (fieldsToValidate.length > 0) {
      try {
        await templateFormRef.value.validateField(fieldsToValidate)
        currentStep.value++
      } catch (error) {
        ElMessage.error('请完善必填信息')
      }
    } else {
      currentStep.value++
    }
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

const addFeature = () => {
  templateForm.features.push('')
}

const removeFeature = (index) => {
  if (templateForm.features.length > 1) {
    templateForm.features.splice(index, 1)
  }
}

const handlePreviewSuccess = (response, file) => {
  templateForm.previewImage = URL.createObjectURL(file.raw)
  ElMessage.success('图片上传成功')
}

const beforePreviewUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!')
    return false
  }
  return true
}

const handleUploadError = () => {
  ElMessage.error('图片上传失败，请重试')
}

const handlePreviewImageError = (event) => {
  event.target.src = defaultPreviewImage
}

const saveDraft = () => {
  ElMessage.success('草稿已保存')
  // 这里可以添加保存草稿的逻辑
}

const publishTemplate = async () => {
  if (!templateForm.agreeTerms) {
    ElMessage.error('请先同意模板发布协议和使用条款')
    return
  }

  try {
    await templateFormRef.value.validate()
    
    publishing.value = true
    
    // 模拟发布过程
    setTimeout(() => {
      publishing.value = false
      ElMessage.success('模板发布成功！')
      
      // 这里可以添加跳转到模板详情页的逻辑
      setTimeout(() => {
        goBack()
      }, 1500)
    }, 2000)
    
  } catch (error) {
    ElMessage.error('请完善所有必填信息')
  }
}

// 辅助方法
const getCategoryLabel = (value) => {
  const category = categories.find(c => c.value === value)
  return category ? category.label : value
}

const getLayoutModeLabel = (value) => {
  const modes = {
    fixed: '固定布局',
    fluid: '流式布局',
    responsive: '响应式布局'
  }
  return modes[value] || value
}

const getComponentLibraryLabel = (value) => {
  const libraries = {
    'element-plus': 'Element Plus',
    'ant-design-vue': 'Ant Design Vue',
    'naive-ui': 'Naive UI',
    'vuetify': 'Vuetify'
  }
  return libraries[value] || value
}

const getFrameworkLabel = (value) => {
  const frameworks = {
    'vue3-vite': 'Vue 3 + Vite',
    'vue3-webpack': 'Vue 3 + Webpack',
    'vue2-webpack': 'Vue 2 + Webpack'
  }
  return frameworks[value] || value
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.template-create-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
  position: relative;
}

.template-create-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(103, 194, 58, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(64, 158, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.template-create-page > * {
  position: relative;
  z-index: 1;
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.header-right {
  flex-shrink: 0;
}

/* 步骤区域 */
.steps-section {
  margin-bottom: 24px;
}

.steps-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.template-steps {
  padding: 20px 0;
}

/* 表单区域 */
.form-section {
  margin-bottom: 24px;
}

.step-content {
  min-height: 500px;
}

.form-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.card-header {
  text-align: center;
  padding: 20px 0 10px;
}

.card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.card-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.template-form {
  padding: 20px;
}

/* 上传区域 */
.upload-area {
  width: 100%;
}

.preview-uploader {
  width: 100%;
}

.preview-container {
  position: relative;
  width: 400px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.preview-container:hover .preview-overlay {
  opacity: 1;
}

.upload-placeholder {
  width: 400px;
  height: 300px;
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
  background: #fafafa;
}

.upload-placeholder:hover {
  border-color: #409eff;
}

.upload-icon {
  font-size: 32px;
  color: #d9d9d9;
  margin-bottom: 12px;
}

.upload-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 12px;
  color: #999;
}

/* 功能特性输入 */
.features-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 颜色选择器 */
.color-picker-group {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 代码文本域 */
.code-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* 预览区域 */
.preview-section {
  padding: 20px 0;
}

.preview-card {
  border: 1px solid #e4e7ed;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.preview-header {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.preview-image-container {
  position: relative;
  flex-shrink: 0;
}

.template-preview-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.premium-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffd700;
  color: #333;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-info {
  flex: 1;
}

.template-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.template-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.template-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.meta-info {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #999;
}

.meta-info span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-details {
  padding: 24px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.tags-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.template-tag {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #666;
}

.features-list li .el-icon {
  color: #67c23a;
}

.tech-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.config-label {
  font-weight: 500;
  color: #333;
  min-width: 100px;
}

.config-value {
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-preview {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #e4e7ed;
}

.included-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-tag {
  font-size: 12px;
}

.no-data {
  font-size: 14px;
  color: #999;
  font-style: italic;
}

/* 发布选项 */
.publish-options {
  padding: 20px 0;
}

.publish-type-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.publish-option {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  padding: 20px;
  margin: 0;
  transition: all 0.3s ease;
}

.publish-option:hover {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.02);
}

.publish-option.is-checked {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.05);
}

.option-content {
  margin-left: 12px;
}

.option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.option-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.option-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* 操作区域 */
.actions-section {
  position: sticky;
  bottom: 20px;
  z-index: 10;
}

.actions-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.actions-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.actions-left,
.actions-right {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .template-create-page {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .preview-header {
    flex-direction: column;
  }
  
  .template-preview-image {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .template-create-page {
    padding: 12px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .upload-placeholder,
  .preview-container {
    width: 100%;
    max-width: 400px;
  }
  
  .actions-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .actions-left,
  .actions-right {
    width: 100%;
    justify-content: center;
  }
  
  .tech-config {
    gap: 12px;
  }
  
  .config-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .upload-placeholder {
    background: #2a2a2a;
    border-color: #4a4a4a;
  }
  
  .preview-card {
    background: #2a2a2a;
    border-color: #4a4a4a;
  }
}
</style>
